<template>
  <div>
    <Modal
      v-model="show"
      :mask-closable="true"
      :closable="false"
      :width="630"
      :footer-hide="true"
      :on-visible-change="change()"
    >
      <p slot="header">
        <Icon type="ios-information-circle"></Icon>
        <span>拨打历史记录:{{clue.phoneEncty}}</span>
        <span style="float:right;cursor:pointer" @click="cancel(false)">
          <Icon type="ios-close" :size="25" />
        </span>
      </p>
      <div>
        <Table stripe :columns="columns1" :data="histortList" style="height:480px">
          <template
            slot-scope="{ row }"
            slot="callStatus"
          >{{ row.callStatus?row.callStatus.name:"" }}</template>
          <template
            slot-scope="{ row }"
            slot="callResult"
          >{{ row.callStatus?row.callResult.name:"" }}</template>
        </Table>
      </div>
      <!-- <div slot="footer">
        <Button type="default" @click="cancel(false)">取消</Button>
      </div>-->
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      isOpen:false,
      columns1: [
        // { title: "拨打号码", key: "phone" },
        { title: "拨打时间", key: "callAt" },
        { title: "拨打状态", slot: "callStatus" },
        { title: "拨打结果", slot: "callResult" },
        { title: "拨打备注", key: "callRemark" }
      ],
      histortList: []
    };
  },
  props: {
    clue: {
      type: Object,
      default: {}
    }
  },
  methods: {
    cancel(reload = false) {
      this.$emit("cancel");
    },
    getList() {
      var url = "/clue/history/{id}";

      this.post(url, {}, { id: this.clue.id }).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.histortList = res.data;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    change() {
      if(!this.show){
        this.cancel();
          return false;
      }
      return true;
    }
  },
  created() {
    this.getList();
  }
};
</script>

